<template>
    <el-row class="container">

        <el-form :model="ruleForm" ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
            <div class="title">
                <img src="../assets/images/logo1.png" alt="">
                <h3>代理商综合管理系统</h3>
            </div>
            
            <el-form-item prop="account" style="margin-top: 30px">
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
                <i class="fa fa-lock" aria-hidden="true"></i>
                <el-input type="password" v-model="ruleForm.secretkey" auto-complete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
            <p class="copyright">鑫圆共享电子商务股份有限公司© 2017
                <br>蜀ICP备17032496号-4</p>
        </el-form>
    </el-row>
</template>
<script>
import {
    adminLogin
} from '@/api/api';
export default {
    data: function() {
        return {
            logining: false,
            ruleForm: {
                username: '',
                secretkey: ''
            }
        };
    },
    methods: {
        handleSubmit: function() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    var loginParams = {
                        username: this.ruleForm.username,
                        secretkey: this.ruleForm.secretkey
                    };
                    adminLogin(loginParams).then(data => {
                        console.log(data)
                        sessionStorage.setItem('agent', JSON.stringify(data.shopAgent));
                        sessionStorage.setItem('jwt', data.jwt);
                        this.$router.push({
                            path: '/index'
                        });
                    })
                } else {
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
    .container{
        width: 100%;
        height: 100%;
        min-width: 1366px;
        background: url("../assets/images/login.jpg") no-repeat center;
        background-color: #a1ce69;
        background-size: contain;
        position: relative;
    }
    .login-container {
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -moz-border-radius: 50%;
        background-clip: padding-box;
        background: url("../assets/images/form-background.png") no-repeat center;
        background-size: cover;
        width: 600px;
        height: 600px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: 100px;
        top: 50%;
        margin-top: -300px;
        .title {
            font-size: 20px;
            margin: 80px auto 0;
            color: #fff;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
        }
        .title img{
            width: 208px;
            height: auto;
            margin-left: 40px;
        }
        .remember {
            margin-bottom: 20px;
        }
        .copyright {
            font-size: 14px;
            color: #fff;
            text-align: center;
        }
        i{
            font-size: 24px;
            color: #fff;
            margin-right: 5px;
        }
        .el-input{
            width: 400px;
            height: 60px;
        }
        .el-input .el-input__inner[row="2"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #bfcbd9;
            box-sizing: content-box;
            color: #1f2d3d;
            display: block;
            font-size: inherit;
            height: 50px;
            line-height: 1;
            outline: 0;
            padding: 3px 10px;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
        }
        .el-button{
            width: 324px;
            height: 60px;
            background: url("../assets/images/btn-back.png") no-repeat center;
            background-size: cover;
        }
        .el-button--primary {
            border: none;
            font-size: 24px;
            text-align: center;
            letter-spacing: 20px;
            padding-left: 50px;
        }
    }
</style>